﻿<template>
    <div class="SHZY-common-layout">
        <div class="SHZY-common-layout-left">
            <div class="SHZY-common-title">
                <h2>接口分类</h2>
                <span class="options">
                    <el-tooltip content="分类管理" placement="top">
                        <el-link icon="el-icon-menu" :underline="false" @click="handleTypeManage" />
                    </el-tooltip>
                </span>
            </div>
            <el-scrollbar class="SHZY-common-el-tree-scrollbar" v-loading="treeLoading">
                <el-tree ref="treeBox" :data="treeData" :props="defaultProps" default-expand-all highlight-current
                    :expand-on-click-node="false" node-key="id" @node-click="handleNodeClick" class="SHZY-common-el-tree">
                    <span class="custom-tree-node" slot-scope="{ node }">
                        <i class="el-icon-notebook-2" />
                        <span class="text">{{ node.label }}</span>
                    </span>
                </el-tree>
            </el-scrollbar>
        </div>
        <div class="SHZY-common-layout-center">
            <el-row class="SHZY-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="租户">
                            <el-select v-model='tenantId' placeholder='请选择' clearable required :style='{ "width": "100%" }'>
                                <el-option v-for="(item, index) in tenantIdOptions" :key="index" :label="item.fullName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">
                                {{ $t('common.search') }}</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">{{ $t('common.reset') }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="SHZY-common-layout-main SHZY-flex-main">
                <div class="SHZY-common-head">
                    <topOpts @add="addOrUpdateHandle()" />
                    <div class="SHZY-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false"
                                @click="getInterfaceDetailList()" />
                        </el-tooltip>
                    </div>
                </div>
                <SHZY-table v-loading="listLoading" :data="tableData">
                    <el-table-column prop="tenantId" label="租户" />
                    <el-table-column prop="tenantExternalId" label="外部系统" />
                    <el-table-column prop="functionId" label="函数" />
                    <el-table-column prop="requestMethod" label="请求方式" />
                    <el-table-column prop="authenticationId" label="身份信息" />
                    <el-table-column prop="url" label="接口地址" :show-overflow-tooltip="true" />
                    <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" />
                    <el-table-column prop="enabledMark" label="状态" width="70" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
                                {{ scope.row.enabledMark == 1 ? '正常' : '停用' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)" />
                        </template>
                    </el-table-column>
                </SHZY-table>
            </div>
        </div>
        <Form v-if="formVisible" ref="Form" @refreshDataList="getInterfaceDetailList" />
        <TypeList v-if="drawer" ref="TypeList" @refreshDataList="initData" />
    </div>
</template>
  
<script>
import { getInterfaceList, getInterfaceDetailList, delInterfaceDetail } from '@/api/system/interface/interface'
import { getTenantAll } from '@/api/system/interface/tenant'
import Form from './Form'
import TypeList from './components/index'

export default {
    name: 'system-interface',
    components: {
        Form,
        TypeList
    },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'fullName'
            },
            interfaceId: '',
            tenantId: '',
            drawer: false,
            formVisible: false,
            treeLoading: false,
            listLoading: false,
            treeData: [],
            tableData: [],
            tenantIdOptions: [],
        }
    },
    created() {
        this.getTenantAll()
        this.initData()
    },
    methods: {
        search() {
            this.getInterfaceDetailList()
        },
        reset() {
            this.tenantId = ""
            this.getInterfaceDetailList()
        },
        getTenantAll() {
            getTenantAll().then(res => {
                this.tenantIdOptions = res.data.list;
            })
        },
        initData() {
            this.treeLoading = true
            getInterfaceList().then(res => {
                this.treeData = res.data.list
                this.$nextTick(() => {
                    this.interfaceId = this.treeData[0].id
                    this.$refs.treeBox.setCurrentKey(this.interfaceId)
                    this.treeLoading = false
                    this.interfaceId && this.getInterfaceDetailList()
                })
            }).catch(() => {
                this.treeLoading = false
            })
        },
        getInterfaceDetailList() {
            this.listLoading = true
            let query = {
                interfaceId: this.interfaceId,
                tenantId: this.tenantId,
            }
            getInterfaceDetailList(query).then(res => {
                this.tableData = res.data.list
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
        },
        // 分类管理
        handleTypeManage() {
            this.drawer = true
            this.$nextTick(() => {
                this.$refs.TypeList.init()
            })
        },
        handleNodeClick(data) {
            if (this.interfaceId === data.id) return
            this.interfaceId = data.id
            this.reset()
        },
        addOrUpdateHandle(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.Form.init(id, this.interfaceId)
            })
        },
        handleDel(id) {
            this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
                type: 'warning'
            }).then(() => {
                delInterfaceDetail(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        duration: 1500,
                        onClose: () => {
                            this.getInterfaceDetailList()
                        }
                    })
                })
            }).catch(() => { })
        }
    }
}
</script>